<template>
   <div v-if="SearchResult.users">

       <!-- 用户 -->
       <div v-if="SearchResult.users.total>0" id="UsersData" class="flex">

            <div style="width:100%">
                <button class="title" @click="toSearchDetail(2)">相关用户:{{SearchResult.users.total}} <i class="el-icon-arrow-right"></i></button>
            </div>
          
           <button v-for="item in SearchResult.users.records" :key="item.uid" class="user flex" @click="toPersonal(item)">
               <img  :src="item.headphoto" class="userImg">
               <div id="username" class="overflow">{{item.username}}</div>
           </button>
       </div>

        <!-- 文章 -->
       <div v-if="SearchResult.articles.total>0" id="ArticlesData" class="flex">
         <div style="width:100%">
           <button class="title" @click="toSearchDetail(1)">相关文章:{{SearchResult.articles.total}} <i class="el-icon-arrow-right"></i></button>
         </div>
           <button v-for="item in SearchResult.articles.records" :key="item.articleid" class="article flex" @click="ToArticleDetail(item.id)">
                <img :src="item.headphoto" class="articleImg" >
                <div class="content flex">
                     <div id="title" class="overflow">{{item.title}}</div>
                     <div id="time">发布于 {{item.createdTime | time}}</div>
                </div>
           </button>
       </div>

   </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Search',['SearchResult'])
     },
     data() {
        return {
            Users:[],
            Articlces:[],
        }
     },
     methods:{
        ...mapMutations('Search',['SEARCHDOWN','SETKEYWORD','SETNAVIINDEX','SEARCHDOWN']),
        toSearchDetail(index){
            this.SETNAVIINDEX(index)
            this.SEARCHDOWN()
            this.$router.push('/search',()=>{})
        },
         ToArticleDetail(id){
            this.$router.push({path:'/articleDetail', query: {id} })
            this.SEARCHDOWN()
         },

        toPersonal(user){
            this.$public.ToPersonal(user.uid)
        },

     },
  }
</script>
<style scoped lang='less'>
 .title{
     background: var(--GeneralBackColor);
     border-radius: 5px;
     padding: 5px;
     margin: 10px 0;

     color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    

    i{
        margin-left: 10px;
        color: white;
    }
}
.userImg{
    width: 40px;
    height:40px;
    border-radius: 50%;
    margin-right: 5px;
}
.articleImg{
    width: 80px;
    height: 80px;
    margin-right: 5px;
}
#UsersData,#ArticlesData{
    width: 100%;
    justify-content: flex-start;
}
.user,.article{
    background: var(--GeneralBackColor);
    border:1px solid whitesmoke;
    border-radius: 5px;
    padding:10px;
    margin: 5px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;

    overflow: hidden;
}
.user{
    // width: 120px;
    justify-content: space-around;

    #username{
        max-width: 200px;
    }
}
.user:hover,.article:hover{
    // border:1px solid red;
    transform: scale(1.01);
    transition-delay: 0.2s;
    box-shadow: 0 0 5px black;
    background: var(--GeneralBackColor);
}
.article{
     width: 100%;
    overflow: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
   
    .content{
      
        width: 100%;
        #title{
             width: 100%;
             text-align: left;
        }
        #time{
            position: absolute;
            right: 5px;
            font-size: 10px;
            bottom: 5px;
        }
    }
}
</style>